<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue计算属性note</title>
</head>
<body>
    <div id="app">
        <h1>
            {{calResult}}
        </h1>
        <button @click="a++">+1</button>
        <button @click="calResult=100">修改</button>
        <!-- calResult 可赋值 数值 字符串 布尔值 数组 对象 
        ！！！函数还没有试过
        -->
    </div>

    <script src="vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:function(){
                return {
                    a:100,
                    b:200
                }
            },
            computed:{
                // 计算 calculation
                calResult:{
                    get:function(){
                        console.log("get被调用");
                        return this.a + this.b
                    },
                    set:function(val){
                        console.log(val);
                        console.log(typeof val);
                        console.log("set被调用");

                    }
                }

            }
        })
    </script>
</body>
</html>